Ext.define('ExtjsAPP.view.mainview.MainView', {
    extend: 'Ext.container.Viewport',
    xtype: 'mainview',
    layout: 'fit',
    controller: 'mainview',
    requires: [
        'ExtjsAPP.view.mainview.HeadView',
    ],
    items: [{
        xtype: 'panel',
        layout: 'border',
        controller: 'main',
        items: [{
            region: 'north',     // position for region
            xtype: 'headview',
            split: true,         // enable resizing
            margin: '0 5 5 5'
        },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            margin: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit'
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margin: '5 5 0 0'
        }]
    }]
})